function generateCode() {
    const dlu = document.querySelector('.dlu')
    dlu.disabled = true   /*每一次验证码刷新按钮禁用*/
    const input = document.getElementById('inputCode')
    input.value = ''        /*每一次验证码刷新输入框清空*/
    const captcha = document.getElementById('captcha')
    const canvas = document.createElement('canvas')
    canvas.width = captcha.offsetWidth
    canvas.height = captcha.offsetHeight
    captcha.innerHTML = ''
    captcha.appendChild(canvas)
    let ctx = canvas.getContext('2d')

    // 生成随机验证码
    let code = ''
    const colorString = 'abcdefghijklmnopqrstuvwxyz0123456789'
    for (let i = 0; i < 6; i++) {
        let random = colorString[Math.floor(Math.random() * colorString.length)]
        code += random
    }

    // 绘制验证码背景
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 绘制干扰线
    for (let i = 0; i < 7; i++) {
        ctx.beginPath()
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
        ctx.strokeStyle = 'gray'
        ctx.lineWidth = 1
        ctx.stroke()
    }

    // 绘制验证码文字
    ctx.font = '30px Arial italic'
    ctx.fillStyle = 'black'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(code, canvas.width / 2, canvas.height / 2)

    // 将生成的验证码存储在页面上，以便后续验证
    const generatedCode = document.getElementById('generatedCode')
    if (generatedCode) {
        generatedCode.innerText = code
        generatedCode.style.display = 'none'
    }
}

window.onload = function() {
    const dlu = document.querySelector('.dlu')
    dlu.disabled = true
    const input = document.getElementById('inputCode')
    const generatedCode = document.getElementById('generatedCode')
    const username = document.getElementById("usernameInput")
    const password = document.getElementById("passwordInput")

    // 生成验证码
    generateCode()

    // 通用函数，用于检查表单输入状态
    function checkForm() {
        if(input.value.trim() === generatedCode.innerText.trim() &&
            username.value.trim() !== "" &&
            password.value.trim() !== "") {
            dlu.disabled = false
        } else {
            dlu.disabled = true
        }
    }

    // 为验证码、用户名、密码输入框添加事件监听器
    input.addEventListener('input', checkForm)
    username.addEventListener('input', checkForm)
    password.addEventListener('input', checkForm)
}





